<template>
  <view
      @click="toGoodsDetail(item)"
      class="goods-card">
    <view v-if="!loading">

      <view
          v-if="item.type&&item.type.id"
          class="type-text-view">
        <text v-if="item.type&&item.type.parentId">{{ shop.getI18nByGoodsTypeId(item.type.parentId).name }}{{ " - " }}
        </text>
        <text>{{ shop.getI18nByGoodsTypeId(item.type.id).name }}</text>
      </view>
      <view style="height: 20rpx"></view>
      <view class="goods-card-box">
        <view
            v-if="item.bodyJson&&item.bodyJson.length>0"
            class="img-box">
          <image
              v-if="item.bodyJson[0].type==='fileIdOfImg'"
              mode="aspectFill"
              class="goods-image"
              :src="$kt.file.visit(item.bodyJson[0].value)">
          </image>
          <video
              v-else-if="item.bodyJson[0].type==='fileIdOfVideo'"
              class="goods-image"
              :src="$kt.file.visit(item.bodyJson[0].value)">
          </video>
        </view>
        <view class="goods-text-box">
          <view class="goods-text">
            {{ item.name }}
          </view>
          <view style="height: 10rpx"></view>
          <view class="price">
            <text
                class="price-dot"
            >{{ "￥" }}
            </text>
            {{ item.price }}
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import shop from "@/js/shop";
import request from "@/uni_modules/uniapp-kantboot/libs/request";

export default {
  props: {
    goodsId: {
      type: String | Number,
      default: () => {
        return '';
      }
    },
  },
  mounted() {
    this.getById();
  },
  data() {
    return {
      shop,
      item: {},
      loading: false
    };
  },
  methods: {
    getById() {
      this.loading = true;
      // /business-shop-web/shopGoods/getById
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoods/getById',
        data: {
          id: this.goodsId
        },
        stateSuccess: res => {
          this.item = res.data;
          shop.handleList([this.item]).then(res => {
            this.item = res[0];
            this.loading = false;
          });
        },
        stateFail: err => {
          this.loading = false;
        }
      });
    },
    toGoodsDetail(item) {
      if (this.isChoose) {
        uni.$emit('goods:choose', item);
        return;
      }
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail?goodsId=' + item.id
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.goods-card {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10rpx;

  .type-text-view {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }

  margin-bottom: 20rpx;
}


.goods-card-box {

  .img-box {
    display: inline-block;
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .goods-image {
      width: 100%;
      height: 100%;
    }
  }

  .goods-text-box {
    display: inline-block;
    width: calc(100% - 120rpx);
    box-sizing: border-box;
    vertical-align: top;
    padding: 0 10rpx 0 10rpx;

    .goods-text {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .price {
    font-weight: bold;
    font-size: 32rpx;
    color: #ff0000;

    .price-dot {
      font-size: 24rpx;
    }
  }
}

.goods-card:active {
  transform: scale(.98);
}
</style>
